// Hide focus outlines when interacting with mouse
// https://github.com/WICG/focus-visible
%smart-focus-outline {
  &:focus {
    outline: $focus-outline;
  }

  @at-root .js-focus-visible &:focus:not(.focus-visible) {
    outline: 0;
  }
}

@mixin react-transition-fade-in {
  &-enter {
    opacity: 0;
  }

  &-enter-done {
    opacity: 1;
    transition: opacity .2s ease-out;
  }
}

@mixin react-transition-fade-out {
  &-exit {
    opacity: 1;
  }

  &-exit-active {
    opacity: 0;
    transition: opacity .2s ease-out;
  }
}
